<template>
  <view class="knowledge-header">
    <!-- 知识库选择器 -->
    <view class="selector-icons">
      <!-- 知识库搜索按钮 -->
      <view class="icon-button search-icon">
        <u-icon name="search" size="30" color="#333" @click="onSearch"></u-icon>
      </view>
      <!-- 上传知识库按钮 -->
      <view class="icon-button upload-icon">
        <u-icon name="plus" size="30" color="#333" @click="onUpload"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'KnowledgeHeader',
  methods: {
    onSearch() {
      this.$emit('search')
    },
    onUpload() {
      this.$emit('upload')
    }
  }
}
</script>

<style lang="scss" scoped>
.knowledge-header {
  background-color: #ffffff;
  margin: 20rpx 0;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .selector-icons {
    display: flex;
    align-items: center;
    
    .icon-button {
      width: 60rpx;
      height: 60rpx;
      border-radius: 12rpx;
      background-color: #f5f5f5;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.95);
        box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
      }
    }
    
    .search-icon, .upload-icon {
      margin: 0 20rpx;
    } 
  }
}
</style> 